import { NextPage, PageConfig } from 'next';
import Head from 'next/head';
import { useEffect, useState } from 'react';
import api from '../../atoms/api';
import smartfetch from '../../atoms/smartfetch';
import HeadTitle from '../../components/headtitle';
import MainContainer from '../../components/maincontainer';
import Container from '../../components/container';
import GroupTitle from '../../components/grouptitle';
import GroupTitleByupdown from '../../components/grouptitlebyupdown';
import { Query as Q1, Result as R1 } from '../api/activity/launch.api';
import { Query as Q2, Result as R2 } from '../api/activity/signup.api';
import { Query as Q3, Result as R3 } from '../api/activity/follow.api';
import Avtivity from './avtivity';
import GetUserInfo from '../../atoms/userinfo';

interface IProps {
}

/**
 * 我的活动
 */
const Page: NextPage<IProps> = () => {
	//发起活动
	const [directionLaunch, setDirectionLaunch] = useState(false);
	const [dataLaunch, setDataLaunch] = useState<R1>({
		data: [],
		count: 0
	});
	//参与活动
	const [directionSignup, setDirectionSignup] = useState(false);
	const [dataSignup, setDataSignup] = useState<R2>({
		data: [],
		count: 0
	});
	//关注活动
	const [directionFollow, setDirectionFollow] = useState(false);
	const [dataFollow, setDataFollow] = useState<R3>({
		data: [],
		count: 0
	});

	//加载数据
	async function Load() {
		const user = GetUserInfo();
		const launch = await smartfetch<R1, Q1>(api['/api/activity/launch'], 'get', { userid: user.userid });
		setDataLaunch(launch);
		const signup = await smartfetch<R2, Q2>(api['/api/activity/signup'], 'get', { userid: user.userid });
		setDataSignup(signup);
		const follow = await smartfetch<R3, Q3>(api['/api/activity/follow'], 'get', { userid: user.userid });
		setDataFollow(follow);
	}
	useEffect(() => {
		void Load();
	}, []);
	return (
		<>
			<Head>
				<title>我的活动</title>
			</Head>
			<MainContainer>
				<HeadTitle title='我的活动' />
				<Container>
					<GroupTitleByupdown dir={false} title='我发起的活动' onclick={(v) => {
						setDirectionLaunch(v);
					}} />
					<div className={directionLaunch ? 'up' : 'down'}>
						{dataLaunch.data.map((it, i) => {
							return <Avtivity key={it.aid} type='1' theme={it.theme} time={it.starttime} aid={it.aid} no={i + 1} />;
						})}
					</div>
					<GroupTitleByupdown dir={false} title='我参与的活动' onclick={(v) => {
						setDirectionSignup(v);
					}} />
					<div className={directionSignup ? 'up' : 'down'}>
						{dataSignup.data.map((it, i) => {
							return <Avtivity key={it.id} type='2' theme={it.theme} time={it.signuptime} aid={it.aid} no={i + 1} />;
						})}
					</div>
					<GroupTitleByupdown dir={false} title='我关注的活动' onclick={(v) => {
						setDirectionFollow(v);
					}} />
					<div className={directionFollow ? 'up' : 'down'}>
						{dataFollow.data.map((it, i) => {
							return <Avtivity key={it.id} type='3' theme={it.theme} time={it.followtime} aid={it.aid} no={i + 1} />;
						})}
					</div>
				</Container>
			</MainContainer>
			<style jsx>{`
			
.up,.down{
display: flex;
flex-direction: column;
margin-left: 1rem;
}
.up{
display:none
}
			`}</style>
		</>
	);
};

export const config: PageConfig = {
	amp: false
};

export default Page;

